<script type="text/html" template lay-done="layui.data.selfDepartmentdone(d);">
    <div class='temporary-pastHtml-content layui-form' lay-filter="personnel-of-unit">
        <div class="layui-row">
            <div class="layui-col-md12"> 
                <div class="requestProcessBox" id="requestProcessBox"></div>
            </div>
        </div>
        <!-- <div class="layui-row" style="text-align: center;margin-top: 15px;">
            <div class="data-review-container" style="display: none;"></div>
            <button type="button" class="layui-btn T-confirm">确认</button>
        </div> -->
    </div>
</script>

<script type="text/html" id="assginTaskTpl">
    {{# layui.each(d, function(index, item) {  }}
        <div class="unit-content">
            <a href="javascript:void(0)">{{item.userName}}</a>
            <i class="layui-icon layui-icon-close del-tag" data-target="delName" data-usercode="{{item.user_code}}" data-certcode="{{item.cert_code}}"  data-deptnme="{{item.dept_name}}" data-phone="{{item.phone}}" data-email="{{item.email}}"></i>
        </div>
    {{#  }) }}
</script>

<style>
    .requestProcessBox{
        width: 100%;
        height: 360px;
    }
</style>
<script>
    layui.data.selfDepartmentdone = function (d) { 
        layui.use(['admin', 'table', 'form', 'laytpl'], function () {
            var admin = layui.admin,
                table = layui.table,
                form = layui.form,
                $ = layui.jquery,
                laytpl = layui.laytpl,
                onlyUnit = d.params.onlyUnit ? d.params.onlyUnit : '',
                allStaff = d.params.checkIds ? d.params.checkIds : [],
                grade = d.params.showDetail ? d.params.showDetail : '',
                selectUser = d.params.selectUser ? d.params.selectUser : '';
                userdata = layui.data('userdata').data;
             
                // 调用请示流程图
                admin.req({
                    url: 'myapi/DC/api/rest/web/custom/GetAskFlow',
                    data: { 
                        writeid: d.params.writeid,
                        access_token: layui.data('layuiAdmin').access_token
                    },
                    success: function(res){ 
                        if(res.data.retcode==0){
                            showChartsFun(res)
                        }else{
                            layer.msg(res.data.retmsg,{time:1000})
                        }
                    },
                    error:function(error){
                        console.log('error', error)
                    } 
                }) 
             //流程图
             function getRepeatNum(dataArr){ 
                    var obj = {}; 
                    for(var i= 0, l = dataArr.length; i< l; i++){ 
                        var item = dataArr[i].level; 
                        obj[item] = (obj[item] +1 ) || 1; 
                    } 
                    return obj; 
                } 
                function showChartsFun(result){  
                        var dataArr=result.data.dataflow; 
                        var newDataArr=[],duplicate={};
                        var repeatNumObj=getRepeatNum(dataArr);
                        var defaultYObj={

                        }  
                        for(var key in repeatNumObj){
                            if(repeatNumObj[key]>1){ 
                                defaultYObj[key]=0;
                            } 
                        } 
                        for(var i=0;i<dataArr.length;i++){
                            var symbol="",initX=100,initY=100,currentX,currentY,defaultIncreX=100,defaultIncreY=50;
                            if(i==0){//image:///src/views/task/temporary/images/centerIcon.png
                                symbol="image:///src/views/task/temporary/images/startIcon.png"
                            }else if(dataArr[i].name=="结束"){
                                symbol="image:///src/views/task/temporary/images/endIcon.png"
                            }else{
                                symbol="image:///src/views/task/temporary/images/centerIcon.png"
                            } 
                            if(dataArr[i].level=="root"){
                                currentX=initX;
                                currentY=initY;
                            }else{
                                if(repeatNumObj[dataArr[i].level]>1){
                                    // repeatNumObj[dataArr[i].level]
                                    if(repeatNumObj[dataArr[i].level]){
                                        defaultYObj[dataArr[i].level]=defaultYObj[dataArr[i].level]+defaultIncreY;
                                    }
                                    currentX=initX*(Number(dataArr[i].level))+initX;
                                    currentY=defaultYObj[dataArr[i].level]
                                }else{
                                    currentX=initX*(Number(dataArr[i].level))+initX;
                                    currentY=initY;
                                }
                            }
                            var eachNewObj={
                                name: dataArr[i].name,
                                value: dataArr[i].value,
                                x:currentX,
                                y:currentY,
                                symbol:symbol
                            };
                            newDataArr.push(eachNewObj);
                        } 
                        var option = { 
                            title: {
                                text:d.params.taskname+"——请示流程", 
                                left:"center",
                                top:10,
                                textStyle:{
                                    fontSize:15,
                                    fontWeight:600
                                }
                            },
                            animationDurationUpdate: 1500,
                            coordinateSystem: 'polar',
                            animationEasingUpdate: 'quinticInOut',
                            tooltip: {
                                trigger: 'item', 
                                formatter:function(params){     
                                    var valueArr=params.value?params.value:[];  
                                    var pBox="<div class='toolTipBox'>";
                                    for(var i=0;i<valueArr.length;i++){
                                        pBox+="<p>"+valueArr[i]+"</p>";
                                    } 
                                    pBox+="</div>"; 
                                    return valueArr.length>0?pBox:"";
                                },
                                backgroundColor:"rgba(255,255,255,0.2)",
                                borderWidth:1,
                                borderColor:"#DFE4EB",
                                padding:[10,20],
                                textStyle:{
                                    color:"#41719C"
                                }
                            }, 
                            series: [ 
                                {
                                    type: 'graph',
                                    layout: 'none',
                                    symbolSize: 50,
                                    roam: false,
                                    label: {
                                        show: true,
                                        position:'bottom'
                                    }, 
                                    hoverAnimation:false,
                                    edgeSymbol: ['none', 'arrow'],
                                    edgeSymbolSize: [4, 10],   
                                    itemStyle:{
                                        color:'#000'
                                    },
                                    data: newDataArr,
                                    // links: linksArr,
                                    links:result.data.linkflow,
                                    lineStyle: {
                                        opacity: 0.9,
                                        width: 2,
                                        color:"#DFE4EB",  
                                        curveness: 0  
                                    }
                                }
                            ]
                        };
                        var myChart = echarts.init(document.getElementById("requestProcessBox")); 
                        myChart.setOption(option); 
                        // myChart.on('click', function (params) { 
                        // 	if (params.componentType === 'markPoint') {
                        // 	    // 点击到了 markPoint 上
                        // 	    if (params.seriesIndex === 5) {
                        // 	        // 点击到了 index 为 5 的 series 的 markPoint 上。
                        // 	    }
                        // 	}
                        // 	else if (params.componentType === 'series') {
                        // 	    if (params.seriesType === 'graph') {
                        // 	        if (params.dataType === 'edge') {
                        // 	            // 点击到了 graph 的 edge（边）上。
                        // 	        }
                        // 	        else {
                        // 	            // 点击到了 graph 的 node（节点）上。
                        // 	        }
                        // 	    }
                        // 	}
                        // });
                    }
             

            
        })
    }
</script>